<template>
  <div class="goodsClass">
    <Headershort title="分类" />
    <div class="item"></div>
    <Classify :goodsData='cosmetics' :title="cosmetics[0].title" />
    <Classify :goodsData='facialcare' :title="facialcare[0].title" />
    <Classify :goodsData='perfume' :title="perfume[0].title" />
  
    <div class="add"></div>
    <Footers/>
  </div>
</template>

<script>
import Headershort from "../components/changeHeader"
import Classify from "../components/classify"
import Footers from "../components/footer"

export default {
  name: "goodsClass",
  components: {
    Headershort,
    Classify,
    Footers
  },
  data() {
    return {
      cosmetics: [
        {
          title: "未知标题"
        }
      ],
      facialcare: [
        {
          title: "未知标题"
        }
      ],
      perfume: [
        {
          title: "未知标题"
        }
      ]
    }
  },
  created() {
    var flag = this.$axios.defaults.baseURL == "http://localhost:3000"
    var cosmetics_url = flag ? "/cosmetics" : "/cosmetics.json"
    this.$axios(cosmetics_url).then((res) => {
      console.log(res.data)
      this.$data.cosmetics = res.data.data
    }).then((error) => {

    })
    var facialcare_url = flag ? "/facialcare" : "/facialcare.json"
    this.$axios(facialcare_url).then((res) => {
      console.log(res.data)
      this.$data.facialcare = res.data.data
    }).then((error) => {

    })
    var perfume_url = flag ? "/perfume" : "/perfume.json"
    this.$axios(perfume_url).then((res) => {
      console.log(res.data)
      this.$data.perfume = res.data.data
    }).then((error) => {

    })
  }
}
</script>

<style scoped lang="less">
.item {
  height: 120/75rem;
}

.add {
  height: 100/75rem;
  width: 100%
}
</style>
